// a声明本地存储数据
let data = []
// 调用时间函数
getTime()
setInterval(() => {
    getTime()
}, 1000);
// 本地存储数据初始化渲染
init()
// 渲染函数
function init() {
    data = getData()
    if (data === null) {
        data = []
        return
    }

    for (const item of data) {
        const ele = $(`
        <li>
            <input type="checkbox" name="" id="${item.id}" />
            <input type="text" class="modif" />
            <span>${item.content}</span>
            <button class="mod-btn">修改</button>
            <button class="del-btn">删除</button>
        </li>
    `)
        if (item.isDone) {
            $('#donelist').append(ele)
            ele.children(0).attr('checked', item.isDone)
        } else {
            $('#todolist').append(ele)
            ele.children(0).attr('checked', item.isDone)
        }

    }
}
// b存储数据函数-----将数据存储到本地存储中
function saveData(data) {
    const value = JSON.stringify(data)
    localStorage.setItem('todolist', value)
}

// c读取数据函数-------从本地存储中读出数据
function getData() {
    const value = localStorage.getItem('todolist')
    data = JSON.parse(value)
    return data
}

// d顶部增加元素函数
function newEle(e) {
    if (e.type === 'keyup') {
        if (e.key !== 'Enter') {
            return
        }
    }
    // 新建新增元素数据
    const newData = {
        id: data.length ? data[data.length - 1].id + 1 : 1,
        content: $('#inp').val().trim(),
        isDone: false,
    }
    // 将其推入数据存储数组
    data.push(newData)
    // 将数据存储进本地存储
    saveData(data)
    // 新增元素DOm结构
    const ele = $(`
                <li>
                    <input type="checkbox" name="" id="${newData.id}" />
                    <input type="text" class="modif" />
                    <span>${newData.content}</span>
                    <button class="mod-btn">修改</button>
                    <button class="del-btn">删除</button>
                </li>
    `)
    // 将新增Dom添加进Dom树
    $('#todolist').append(ele)
    $('#inp').val('')
}

// 删除函数(删除相关dom元素和数据)
function del() {
    const delId = $(this).siblings('input[type="checkbox"]').attr('id')//此数据为字符串型
    const i = data.findIndex(item => item.id == delId) //此处使用==，将delId隐式转换
    data.splice(i, 1)
    saveData(data)
    $(this).parent().remove()//删除相关元素
}
// 事件状态改变函数
function change() {
    const delId = $(this).attr('id')//此数据为字符串型
    const i = data.findIndex(item => item.id == delId) //此处使用==，将delId隐式转换
    if (data[i].isDone) {
        $(this).parent().appendTo($('#todolist'))
        data[i].isDone = false
        saveData(data)//跟新数据
    } else {
        $(this).parent().appendTo($('#donelist'))
        data[i].isDone = true
        saveData(data)//跟新数据
    }
}
// 修改函数
function mod() {
    const thisStr = $(this).text()
    if (thisStr === '修改') {
        $(this).text('确认')
        const modInp = $(this).siblings('input[type="text"]')
        const contentSpan = $(this).siblings('span')
        contentSpan.hide()
        modInp.toggleClass('modif')
        // 传递内容
        const content = contentSpan.text()
        modInp.val(content)
    } else {
        $(this).text('修改')
        const index = $(this).siblings('input[type="checkbox"]').attr('id')
        const modInp = $(this).siblings('input[type="text"]')
        const contentSpan = $(this).siblings('span')
        contentSpan.show()
        modInp.toggleClass('modif')
        // 传递新内容
        const content = modInp.val()
        contentSpan.text(content)
        const i = data.findIndex(item => item.id == index)
        data[i].content = content
        saveData(data)
    }
}

// 搜索函数
function search() {
    const searchContent = $('#inp').val()
    const spans = $('li>span')
    spans.parent().hide()
    spans.each(function (i, span) {
        if ($(span).text().includes(searchContent)) {
            $(span).parent().show()
        }
    })

}
function getTime() {
    const date = new Date()
    const year = date.getFullYear()
    const month = date.getMonth() + 1
    const day = date.getDate() < 10 ? ('0' + date.getDate()) : date.getDate()
    const hour = date.getHours() < 10 ? ('0' + date.getHours()) : date.getHours()
    const minute = date.getMinutes() < 10 ? ('0' + date.getMinutes()) : date.getMinutes()
    const second = date.getSeconds() < 10 ? ('0' + date.getSeconds()) : date.getSeconds()
    const time = `${year}-${month}-${day}  ${hour}:${minute}:${second}`
    $('.time-now span').text(time)
}
// 顶部新增按钮绑定点击事件
$('.add-btn').on('click', newEle)
// 新增给inp框添加键盘事件
$('#inp').on('keyup', newEle)
// 绑定搜索按钮点击事件
$('.search-btn').on('click', search)
// 采用事件委托绑定删除点击事件
$('.content').on('click', '.del-btn', del)
// 采用事件委托绑定改变状态点击事件
$('.content').on('click', 'input[type="checkbox"]', change)
// 采用事件委托绑定修改按钮点击事件
$('.content').on('click', '.mod-btn', mod)


